<script setup>
import { ref,onMounted,reactive } from 'vue'
import {getSearch, setClue, allocationClue,getDepartment,getUser} from '@/api/clue.js'
import router from '@/router'

//给魏浪做数据测试
// import request from '@/utils/request.js'
// const  data = {
//       pageNum:1,
//       pageSize:10
//     }
// const ceshi = async(data) => {
//   const res = await request({
//     url:'/system/dict/type/list',
//     method:'post',
//     data
//   })
//   console.log(res)
// }

// const multipleTableRef = ref()
const multipleSelection = ref([])
// const toggleSelection = (rows) => {
//   if (rows) {
//     rows.forEach((row) => {
//       multipleTableRef.value.toggleRowSelection(row, undefined)
//     })
//   } else {
//     multipleTableRef.value.clearSelection()
//   }
// }

//表格多选
const handleSelectionChange = (val) => {
  val.forEach((item)=>{
    multipleSelection.value.push(item.clueId)
  })
  console.log(multipleSelection.value)
}


/* 分页样式 */
const small = ref(false)
const background = ref(false)
const disabled = ref(false)


//修改页数
const handleSizeChange = (val) => {
  searchForm.pagesize = val
}

//修改页码
const handleCurrentChange = (val) => {
  searchForm.page = val
  resetForm()
  getSearchAPI()
}

/* 三个弹窗：新建线索、分配弹窗、批量添加 */
const dialogVisible = ref({
  add:false,
  allocation:false,
  batch:false
})

//--------------------------------新js操作-------------------------------------------
/* 操作数据 */
//存储搜索数据
const searchForm = reactive({
  page:1,
  pagesize:10,
  clueId:'',
  phone:'',
  name:'',
  createTime:'',
  status:null,
  clueSource:null,
  operation:null,
  total:0
})

//表格数据
const dataList = ref({
  table:[]
})

//查询搜索列表
const getSearchAPI = async()=>{
  const {data} = await getSearch(searchForm)
  searchForm.total = data.total
  // dataList.value.table = data.records
  dataList.value.table = data?.records.map((item)=>{
    return {...item,createTime:getDate(item.createTime)}
  })
}

//清空搜索表单
const ruleFormRef = ref(null)
const resetForm = () => {
  searchForm.page = 1
  // searchForm.pagesize = 10
  ruleFormRef.value.resetFields()
  getSearchAPI()
}

//时间戳转换时间
const getDate = (date)=>{
const newDate = new Date(date)
const year = newDate.getFullYear(); // 获取年份
const month = newDate.getMonth() + 1; // 获取月份，因为getMonth()获取的是0-11，所以需要加1
const day = newDate.getDate(); // 获取日
const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`; // 拼接成日期字符串，其中padStart()方法用来给不足两位的月份和日加上前导0
return formattedDate
}

//点击-新建线索
const openAdd = ()=>{
  dialogVisible.value.add = true
  cancelAddClue.value.resetFields()
}

//新建-线索数据
const addClue = reactive({
  phone:'',
  clueSource:null,
  activityId:'',
  name:'',
  gender:1,
  age:null,
  wechatNumber:'',
  qqNumber:''
})

//取消-关闭新建
const cancelAddClue = ref(null)
const cancel = ()=>{
  dialogVisible.value.add = false
}

//确定-新增线索
const addClueOK = async()=>{
  dialogVisible.value.add = false
  const res = await setClue(addClue)
  console.log(res)
}

//点击-批量新增
const openAddList = ()=>{
  dialogVisible.value.batch = true
}

//分配的数据
const allocationData = ref({
  ids:[],
  departmentId:null,
  userId:null
})

//点击-分配
const openAllocation = async(id)=>{
  dialogVisible.value.allocation = true
  allocationData.value.ids.push(id)
  const res = await getDepartment()
  const res1 = await getUser()
  console.log(res,res1)
}

//点击-跟进
const clueFollow = (id)=>{
  router.push({
    path: `/clue/follow-up/${id}`,
  })
  
}

//生命周期
onMounted(()=>{
  getSearchAPI()
  // ceshi(data)
})
</script>
<template>
  <div class="container">
    <el-form ref="ruleFormRef" :model="searchForm"  label-position="top">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="线索ID" prop="clueId">
            <el-input v-model="searchForm.clueId" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="searchForm.phone" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="线索归属" prop="name">
            <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建日期" prop="createTime">
            <el-time-picker v-model="searchForm.createTime" placeholder="选择日期" style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10" align="middle">
        <el-col :span="6">
          <el-form-item label="线索状态" prop="status">
            <el-select v-model.number="searchForm.status" placeholder="请选择">
              <el-option label="全部" value="0" />
              <el-option label="待跟进" value="1" />
              <el-option label="跟进中" value="2" />
              <el-option label="废弃线索" value="3" />
              <el-option label="伪线索" value="4" />
              <el-option label="转商机" value="5" />
              <el-option label="线索转派" value="6" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="渠道来源" prop="clueSource">
            <el-select v-model.number="searchForm.clueSource" placeholder="请选择">
              <el-option label="线索活动" value="0" />
              <el-option label="推荐介绍" value="1" />
              <el-option label="其他" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :offset="6" :span="6" justify="space-between">
          <el-button type="success" round @click="getSearchAPI">搜索</el-button>
          <el-button type="info" round @click="resetForm()">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col :span="6">
        <el-button size="large" type="primary" @click="openAdd">+ 新建线索</el-button>
        <el-button size="large" type="primary" @click="openAddList">+ 批量添加</el-button>
      </el-col>
      <el-col :offset="14" :span="4">
        <el-button size="large" type="primary">+ 批量分配</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <div>
      <el-table ref="multipleTableRef" :data="dataList.table" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="线索ID" width="120">
          <template #default="scope">{{ scope.row.clueId }}</template>
        </el-table-column>
        <el-table-column property="phone" label="手机号" width="150" />
        <el-table-column property="clueSource" label="渠道来源" show-overflow-tooltip />
        <el-table-column property="createTime" label="创建时间" width="150" />
        <el-table-column property="name" label="归属人" show-overflow-tooltip />
        <el-table-column property="status" label="在线状态" width="120" />
        <el-table-column property="operation" label="操作">
          <template #default="{row}">
            <el-button link type="primary" size="small" v-if="row.operation===0">待跟进</el-button>
            <el-button link type="primary" size="small" v-else-if="row.operation===1" @click="clueFollow(row.clueId)">跟进</el-button>
            <el-button link type="primary" size="small" v-else-if="row.operation===2">待分配</el-button>
            <el-button link type="primary" size="small" v-else-if="row.operation===3" @click="openAllocation(row.clueId)">分配</el-button>
            <el-button link type="primary" size="small" v-else-if="row.operation===5">捞取</el-button>
            <el-button link type="primary" size="small" v-else>查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px" class="clue_footer">

        <el-row>
          <el-col :span="4">
            <!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])">反选</el-button>
            <el-button @click="toggleSelection(searchForm)">清空</el-button> -->
          </el-col>
          <el-col :offset="8" :span="12">
            <div class="demo-pagination-block">
              <el-pagination v-model:current-page="searchForm.page" v-model:page-size="searchForm.pageSize"
                :page-sizes="[10, 20, 50, 100]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="searchForm.total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 新建线索弹窗 -->
    <el-dialog
    v-model="dialogVisible.add"
    title="新建线索"
    width="35%"
    :before-close="handleClose"
  >
    <span>
      <el-form :model="addClue" ref="cancelAddClue" label-width="100px">
        <el-row>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="addClue.phone" type="text" placeholder="请输入"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="渠道来源" prop="clueSource">
            <el-select v-model.number="addClue.clueSource" placeholder="请选择">
              <el-option label="线索活动" value="0" />
              <el-option label="推荐介绍" value="1" />
              <el-option label="其他" value="2" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="活动信息" prop="activityId">
            <el-input  v-model="addClue.activityId" placeholder="请输入"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="客户姓名" prop="name">
            <el-input v-model="addClue.name" type="text" placeholder="请输入"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <!-- <el-form-item label="性别" prop="gender">
            <el-radio-group v-model.number="addClue.gender">
              <el-radio label="男" key="0"/>
              <el-radio label="女" key="1"/>
            </el-radio-group>
          </el-form-item> -->
        </el-row>
        <el-row>
          <el-form-item label="年龄" prop="age">
            <el-input v-model.number="addClue.age" placeholder="请输入年龄"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="微信" prop="wechatNumber">
            <el-input v-model="addClue.wechatNumber" type="text" placeholder="请输入"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="Q Q" prop="qqNumber">
            <el-input v-model="addClue.qqNumber" type="text" placeholder="请输入"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="addClueOK">确定</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 分配线索 -->
  <el-dialog
    v-model="dialogVisible.allocation"
    title="分配线索"
    width="35%"
    :before-close="handleClose">
    <p>您选择了3个线索，请选择人员进行分配</p>
    <el-form>
      <el-row>
        <el-form-item label="请选择部门：">
          <el-select placeholder="请选择">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="请选择人员：">
          <el-select placeholder="请选择">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 批量添加的弹窗batch -->
  <el-dialog
  v-model="dialogVisible.batch"
    title="批量添加线索"
    width="35%"
    :before-close="handleClose"
  >
  <span>上传文件</span>
  <el-row>第一次上传请 <el-button>点击下载模板</el-button></el-row>
  <el-row>
    <el-form-item label="上传文件">
      <el-button type="success">上传</el-button>
      <el-input type="file"></el-input>
    </el-form-item>
  </el-row>
  <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible.batch = false">
          完成
        </el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.clue_footer{
  .demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
}
.container{
  background-color: #fff;
}
</style>